/**
 * Created by bgy on 2016/12/2.
 */
import React from 'react';
import {hashHistory} from 'react-router';

import HeaderTitle from '../../components/common/HeaderTitle';
import GysData from '../../components/user/GysData';
import Global from '../../actions/Global';
import common from '../../actions/common';
import Warn from '../../components/common/Warn';

class Register extends React.Component {
  constructor() {
    super();
    this.state = {
      phoneDisabled: '',
      loadDisabled: '',
      submitBtnDisabled: true,
      vcodeBtnDisabled: true,
      codeInput: '',
      customerKind: '',
      warnMessage: '',
      hidden: 'hidden'
    }
  }

  /*
   手机号验证
   */
  phoneNum() {
    var phoneNum = this.refs.phoneNumber;
    var loginBtn = this.refs.loginBtn;
    var value = phoneNum.value;
    if (/\d{11}/.test(value) && value.length == 11) {
      this.setState({
        vcodeBtnDisabled: false
      });
    }
  }
  /**
   * 发送验证码
   */
  sendCode() {
    var btn = this.refs.sends;
    // var warn = this.refs.warn;
    var phoneNumber = this.refs.phoneNumber.value;
    this.setState({
      vcodeBtnDisabled: true
    });
    //发送验证码
    $.post({
      url: Global.host + '/account/sendMsg',
      async: false,
      data: JSON.stringify({phoneNumber: phoneNumber,smsType: 2}),
      contentType: 'application/json',
      dataType: 'json',
      success: function (data) {
      }
    });
    var num = 60;
    var timer = setInterval(function () {
      btn.innerText = num + 's';
      num--;
      if (num == 0) {
        clearInterval(timer);
        btn.innerText = '重新获取验证码';
      }
    }.bind(this), 1000)

  }
  ensureAgreement(){
    this.setState({submitBtnDisabled:false});
  }
  submitForm(vendorName, organizationCode,cardNo) {
    let vendorInfo = new Object();
    vendorInfo.openId = window.localStorage.getItem('openId');
    vendorInfo.contacts = this.refs.contacts.value;
    vendorInfo.phoneNumber = this.refs.phoneNumber.value;
    vendorInfo.verifyCode = this.refs.verifyCode.value;
    vendorInfo.customerKind = this.refs.customerKind.value;
    vendorInfo.vendorName = vendorName;
    vendorInfo.organizationCode = organizationCode;
    vendorInfo.cardNo = cardNo;
    //注册
    $.ajax({
      type: 'post',
      url: Global.host + '/account/register',
      data: JSON.stringify(vendorInfo),
      async: false,
      dataType: 'json',
      contentType: 'application/json;charset=utf-8',
      success: function (data) {
        console.log(this.state.hidden);
        if (data.errorCode == '0') {
          let vendorInfo = data.data.vendorInfo;
          let user = {account: data.data.account, accountType: data.data.accountType};
          var ownCode = vendorInfo.vendorId;
          var picUploadParams = JSON.parse(window.localStorage.getItem('picUploadParam'));

          for (let i = 0; i < picUploadParams.length; i++) {
            picUploadParams[i].ownCode = ownCode;
            picUploadParams[i].fmFiles[0].ownCode = ownCode;
          }
          window.localStorage.setItem('picUploadParam', JSON.stringify(picUploadParams));
          window.localStorage.setItem('vendorInfo', JSON.stringify(vendorInfo));
          window.localStorage.setItem('user', JSON.stringify(user));
          common.picUpload();
          hashHistory.push('/');
        } else {
          this.setState({hidden: '', warnMessage: data.errorMsg});
          var h = function(){this.setState({hidden: 'hidden'})}.bind(this);
          setTimeout(h,2000);
          return;
        }
      }.bind(this),
      error: function () {
        return false;
      }
    });


  }

  setGysType(event) {
    this.setState({
      phoneDisabled: '',
      loadDisabled: '',
      loginBtn: '',
      codeInput: '',
      customerKind: this.refs.customerKind.value
    });
  }

  render() {
    return (
      <div className="full">
        <HeaderTitle title='注册'/>
        <div className="content">
          <div className="form">
            <div className="form-item">
              <label htmlFor="">联系人</label><input type="text" placeholder="请输入联系人" ref='contacts'/>
            </div>
            <div className="form-item">
              <label htmlFor="">手机号码</label><input type="text" onInput={this.phoneNum.bind(this)} placeholder="请输入手机号码" ref='phoneNumber'/>
            </div>
            <div className='input-group warning hidden' ref="warn">请输入正确的手机号码格式</div>
            <div className="form-item form-item-vcode">
              <label htmlFor="">验证码</label><input type="text" ref="verifyCode" placeholder="请输入验证码" disabled={this.state.codeInput} className="input-vcode"/>
              <button disabled={this.state.vcodeBtnDisabled} ref="sends" onClick={this.sendCode.bind(this)} className="button button-pill btn-green vcodebtn">获取验证码</button>
            </div>
          </div>
          <div style={{height:'1.5rem',width:'100%',backgroundColor:'#f0f0f0'}}></div>
          <div className="form">
            <div className="form-item">
              <label htmlFor="">供应商类型</label>
              <select name="" id="" ref="customerKind" onChange={this.setGysType.bind(this)}>
                <option value="">请选择</option>
                <option value="E">贸易商</option>
                <option value="F">农业组织</option>
                <option value="G">个体户</option>
                <option value="H">个人</option>
              </select>
            </div>
            <Warn hidden={this.state.hidden} message={this.state.warnMessage}/>
            <GysData ensureAgreement={this.ensureAgreement.bind(this)} submitBtnDisabled={this.state.submitBtnDisabled} submitForm={this.submitForm.bind(this)} customerKind={this.state.customerKind}/>
          </div>
        </div>
      </div>
    )
  }
}
export default Register;

